import { settingStore } from '@/store/settingStore'
import { observer } from 'mobx-react-lite'
import { MouseEventHandler } from 'react'

interface CustomCanvasProps {
  className?: string
  style?: React.CSSProperties
  ref?: React.RefObject<HTMLCanvasElement>
  onMouseDown?: MouseEventHandler<HTMLCanvasElement>
}

const CustomCanvas = (props: CustomCanvasProps) => {
  let propsStyle = props.style
  if (!propsStyle) {
    propsStyle = {}
  }
  let style = null
  if (settingStore.value.canvasBackground != 'customize') {
    style = settingStore.value.canvasBackgroundValue
  } else {
    style = {
      background: settingStore.value.diyCanvasBackgroundColor,
    }
  }

  return (
    <canvas
      onMouseDown={props.onMouseDown}
      className={props.className}
      style={{
        transition: '.5s ease-in-out',
        ...style,
        ...propsStyle,
      }}
      ref={props.ref}></canvas>
  )
}

export default observer(CustomCanvas)

// 60 34
